<!DOCTYPE html>
<html lang='en'>

<head>
    <meta charset='UTF-8'>
    <meta name='viewport' content='width=device-width, initial-scale=1.0'>
    <title>Document</title>
    <script src='./vue.js'></script>
</head>

<body>
    <div id='app'>
        <h1>
            <!-- 数组遍历 -->
            <span v-for="item in numList"> {{item}} </span>
        </h1>

        <ul>
            <!-- 多维数组遍历 -->
            <li v-for="item in phoneList">
                <h4> {{ item.title }} </h4>
                <span v-for="item2 in item.list"> {{ item2 }} </span>
            </li>
        </ul>

        <h1>
            <!-- 数字遍历 -->
            <span v-for="item in 10"> {{item}} </span>
        </h1>

        <h1>
            <!-- 字符串遍历 -->
            <span v-for="item in '你好世界'"> {{item}} </span>
        </h1>

        <ul>
            <!-- 对象遍历 -->
            <li v-for="(item,key,index) in user">
                {{ index }} -- {{ key }} -- {{ item }}
            </li>
        </ul>

    </div>
</body>
<script>
    const app = {
        data() {
            return {
                numList: [1, 2, 3, 4, 5, 6, 7, 8],
                phoneList: [
                    {
                        title: '小米',
                        list: [
                            'M1',
                            'M2',
                            'M3',
                            'M4'
                        ]
                    }, {
                        title: '红米',
                        list: [
                            'H1',
                            'H2',
                            'H3',
                            'H4'
                        ]
                    }, {
                        title: '华为',
                        list: [
                            '领先1',
                            '领先2',
                            '领先3',
                            '领先4'
                        ]
                    }, {
                        title: '坚果',
                        list: [
                            '果1',
                            '果2',
                            '果3',
                            '果4'
                        ]
                    }
                ],
                user: {
                    name: '一凡',
                    age: '18',
                    sex: '男'
                }
            }
        },
        methods: {},
    }
    const vm = Vue.createApp(app).mount('#app')
</script>

</html>